<template>
  <view class="my">
    <view class="myinfo">
      <image :src="avator" alt />
      <view @click="test">
        <view>{{userInfo.nickName}}</view>
        <view v-if="userInfo.nickName">微信用户</view>
        <view v-else>点击登录</view>
      </view>
    </view>
    <view class="iconlist">
      <view @click="goTo(item.url)" v-for="(item, index) in listData" :key="index">
        <view :class="['iconfont',item.icon]"></view>
        <view>{{item.title}}</view>
      </view>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				listData: [
				  {
				    title: "我的订单",
				    icon: "icon-wodedingdan0101",
				    url: ""
				  },
				  {
				    title: "优惠券",
				    icon: "icon-youhuiquan",
				    url: ""
				  },
				  {
				    title: "我的足迹",
				    icon: "icon-zuji",
				    url: ""
				  },
				  {
				    title: "我的收藏",
				    icon: "icon-wodeshoucang",
				    url: "/pages/collectlist/main"
				  },
				  {
				    title: "地址管理",
				    icon: "icon-dizhiguanli",
				    url: "/pages/address/main"
				  },
				  {
				    title: "联系客服",
				    icon: "icon-lianxikefu",
				    url: ""
				  },
				  {
				    title: "帮助中心",
				    icon: "icon-bangzhuzhongxin",
				    url: ""
				  },
				  {
				    title: "意见反馈",
				    icon: "icon-yijianfankui",
				    url: "/pages/feedback/main"
				  }
				],
				avator: 'http://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png',
				allcheck: false,
				userInfo: {},
				Listids: []
			}
		},
		onLoad () {
			const userInfo = uni.getStorageSync('userInfo')
			console.log(userInfo)
			if (userInfo.openId) {
				this.userInfo = userInfo
			  this.avator = this.userInfo.avatarUrl
			}
		},
		methods: {
			test(){
				uni.navigateTo({
					url:'../test/test'
				})
			},
		  goTo (url) {
		      const userInfo = uni.getStorageSync('userInfo')
		      if (!userInfo) {
		        wx.navigateTo({
		          url: '/pages/login/main'
		        });
		      } else {
		        return true
		      }
		  }
		}
	}
</script>

<style lang="scss">
.my {
  .myinfo {
    width: 100%;
    height: 280rpx;
    display: flex;
    align-items: center;
    background: #333;
    padding: 0 30rpx;
    box-sizing: border-box;
    image {
      height: 148rpx;
      width: 148rpx;
      border-radius: 50%
    }
    view {
      margin-left: 30rpx;
      view {
        color: #fff;
        font-size: 30rpx;
        margin-bottom: 10rpx
      }
      view:nth-child(2) {
        font-size: 28rpx;
      }
    }
  }
  .iconlist {
    display: flex;
    align-items: center;
    background: #fff;
    flex-wrap: wrap;
		padding-bottom: 50px;
		box-sizing: border-box;
    view {
      width: 33.33%;
      padding: 50rpx 0;
      text-align: center;
      border-right: 1rpx solid rgba(0, 0, 0, .15);
      border-bottom: 1rpx solid rgba(0, 0, 0, .15);
      box-sizing: border-box;
			.iconfont{
				font-size: 50rpx;
			}
      view {
        display: block;
				margin: 0 auto;
				width: 100%;
      }
      view:nth-child(2) {
        margin-bottom: 10rpx;
				margin: 0 auto;
				width: 100%;
      }
    }
    view:nth-child(3n+3) {
      border-right: none;
    }
    view:nth-last-child(1) {
      border-bottom: none;
    }
    view:nth-last-child(2) {
      border-bottom: none;
    }
  }
}
</style>
